<template>
  <div class="page-container-padding">
    <div style="display: flex">
      <div style="width: 700px">
        <div style="margin: 8px 80px; color: #0072fc">
          注意：可选的发布日期是工作统计的标准，评级人员时效性参考的是实际提交时间。
        </div>
        <el-form label-width="80px">
          <el-form-item label="发布日期">
            <el-date-picker
              v-model="formData.publish_time"
              style="width: 100%"
              :clearable="false"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="标题">
            <el-input
              v-model="formData.title"
              placeholder="请输入图形标题或解说的主题"
            ></el-input>
          </el-form-item>
          <el-form-item label="关联品种">
            <el-select
              v-model="formData.varieties"
              multiple
              filterable
              style="width: 100%"
              placeholder="可输入名称关键字快速搜到"
            >
              <el-option
                v-for="v in varietyList"
                :key="v.variety_en"
                :value="v.variety_en"
                :label="v.variety_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图形图片">
            <el-upload
              v-if="formData.id < 0"
              drag
              action="''"
              accept="image/jpeg,image/png"
              style="width: 100%"
              :before-upload="() => false"
              :multiple="false"
              :on-change="fileChange"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" style="width: 100%">
                将图片拖到此处，或
                <em>点击上传</em>
              </div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件。</div>
            </el-upload>
            <div v-else class="img-block">
              <el-image :src="formData.image_url"></el-image>
            </div>
          </el-form-item>
          <el-form-item label="文字解说">
            <el-input
              v-model="formData.explanation"
              show-word-limit
              type="textarea"
              placeholder="请输入"
              maxlength="1500"
              :rows="10"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: right">
              <el-button
                type="primary"
                :loading="saveLoading"
                @click="toSaveExplanation"
              >
                确定保存
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 说明 -->
      <div style="padding: 3px 5px;line-height:22px;max-width:600px;margin-left: 16px;">
        <span class="explain-title">一、工作说明</span>
        <br>图文解读用于与营业部互联网试点。内容包括但不限于：有代表性的数据或比较重要的数据进行数据解读；突发事件、热点的解读；对目前有大行情的品种进行行情解说；对后市行情比较有把握的预判（写出原因、方向即可）；跨品种价差图、跨期价差图、基差图等均可进行解读。
        <br><span class="explain-title">二、工作要求</span>
        <br>1、根据研究员研究品种数量，每个品种月均一张。建议分时段发送，一次一张图加一小段解说，图片不加水印。
        <br>2、数据、突发事件、热点要注意时效性，最好当天发或者隔天(<span style="color: #e94242; font-weight: 700;">16:00后发布的算隔天</span>)。
        <br>3、在内容选择上要有侧重，在常规的数据（周度数据、月度数据）的选择上，当数据有明显变化或特殊变动时进行解读，体现对行情的影响；在行情解说的选择上，当该品种走出一波行情或者近几日有明显上涨或下跌，再对其进行原因及后市行情预判的简述。
        <br>4、注意尽量不出现撰写失误、敏感词汇以及被投诉（非原创等）。
        <br><span class="explain-title">三、考核评价</span>
        <br>1、图表解读主要考核：数量和质量（参考浏览量和客观评价是否被选上）。
        <br>2、数量达标的先进行排名。
        <br>3、质量根据图表的美观度、图表及时性、实用性、分析的逻辑及影响解读，进行等级评价。达到五项的A、达到四项的B、达到三项的C。
      </div>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { GetRuizyVariety } from '@/api/systemManage/variety'
  import { CreateMyChartExplanation } from '@/api/departmentWork/chartExplanation'
  const SPACE = 'V06' // 图表解读的
  export default {
    data() {
      return {
        varietyList: [],
        formData: {
          id: -1,
          publish_time: new Date(),
          title: '',
          varieties: '',
          image_url: '',
          image_file: null,
          explanation: '',
        },
        saveLoading: false,
        varietyLoading: false,
      }
    },
    mounted() {
      GetRuizyVariety(SPACE).then((res) => {
        this.varietyList = res.data
      })
    },
    methods: {
      // 创建数据
      createChartExplain() {
        let saveData = new FormData()
        saveData.append('cid', this.formData.id)
        saveData.append('title', this.formData.title)
        saveData.append('varieties', this.formData.varieties.join(','))
        saveData.append('explanation', this.formData.explanation)
        saveData.append(
          'publish_time',
          datetimeToStr(this.formData.publish_time, false, '-')
        )
        saveData.append('image', this.formData.image_file)
        this.saveLoading = true
        CreateMyChartExplanation(saveData)
          .then((res) => {
            const data = res.data
            if (data.action === 'image') {
              // 上传完图片
              this.formData.image_url = data.image_url
              this.formData.id = data.id
              this.formData.title = data.title
            } else if (data.action === 'explain') {
              this.$baseMessage('保存成功!', 'success')
              this.formData.title = ''
              this.formData.varieties = []
            }
            this.saveLoading = false
          })
          .catch(() => {
            this.saveLoading = false
          })
      },
      // 文件改变
      fileChange(file) {
        // console.log(file)
        this.formData.image_file = file.raw
        this.createChartExplain()
      },

      // 保存解说条目
      toSaveExplanation() {
        if (this.formData.title.length < 1) {
          this.$baseMessage('请填写标题..', 'error')
          return
        }
        if (this.formData.varieties.length < 1) {
          this.$baseMessage('请选择关联品种..', 'error')
          return
        }
        this.createChartExplain()
      },
    },
  }
</script>
<style scoped lang="scss">
  .img-block {
    min-height: 200px;
  }
  .explain-title {
    font-weight: 700;
    color: #006eff;
  }
</style>
